<template>
  <div class="container">
    <div class="box">
      <div class="hang" v-for="(item, index) in status" :key="index">
        <div
          class="block iconfont"
          :class="{
            'icon-kouhong': imgMap[index][innerindex] === 0,
            'icon-mianmo': imgMap[index][innerindex] === 1,
            'icon-yanying': imgMap[index][innerindex] === 2,
            'icon-xiangshui': imgMap[index][innerindex] === 3,
          }"
          v-for="(innerItem, innerindex) in item"
          :key="innerindex"
          @click="flag[index * 6 + innerindex] && turnCard(index, innerindex)"
          ref="list"
        >
          <div
            class="blockcover"
            :class="{ cover: !status[index][innerindex] }"
          ></div>
        </div>
      </div>
    </div>
    <div class="score">得分：&nbsp;{{ score }}</div>
    <button @click="resetBox">reset</button>
  </div>
</template>
<script>
export default {
  name: "Eliminate",
  data() {
    return {
      flag: [],
      cardKind: [],
      status: [[]],
      imgMap: [[]],
      imgStyle: [
        "icon-kouhong",
        "icon-mianmo",
        "icon-yanying",
        "icon-xiangshui",
      ],
      hasTurned: 0,
      turnedX: -1,
      turnedY: -1,
      score: 0,
      timer: "",
    };
  },
  created() {
    this.initFlag();
    this.initCardKind();
    this.initStatus();
    this.initImg();
  },
  methods: {
    initFlag() {
      this.flag = new Array();
      for (let i = 0; i < 36; i++) {
        this.flag.push(true);
      }
    },
    initCardKind() {
      this.cardKind = new Array();
      for (let i = 0; i < 18; i++) {
        let tmp = Math.floor(Math.random() * 4) % 4;
        this.cardKind.push(tmp);
        this.cardKind.push(tmp);
      }
    },
    initStatus() {
      this.status = new Array();
      for (let i = 0; i < 6; i++) {
        this.status[i] = new Array();
        for (let j = 0; j < 6; j++) {
          this.status[i].push(false);
        }
      }
    },
    initImg() {
      this.imgMap = new Array();
      for (let i = 0; i < 6; i++) {
        this.imgMap[i] = new Array();
        for (let j = 0; j < 6; j++) {
          let t = Math.floor(Math.random() * this.cardKind.length);
          this.imgMap[i].push(this.cardKind[t]);
          this.cardKind.splice(t, 1);
        }
      }
    },
    turnCard(i, j) {
      this.$set(this.status[i], j, true);
      this.$set(this.status, i, this.status[i]); //翻牌
      if (!this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        if (this.hasTurned === 0) {
          //若没有翻开的排，则记录翻开的牌信息
          console.log("clicked");
          this.hasTurned = 1;

          this.turnedX = i;
          this.turnedY = j;
          console.log("status: " + i + j + this.status[i][j]);
        } else {
          //若有，则与已翻开的牌比较
          this.hasTurned = 0;
          if (
            this.imgMap[i][j] === this.imgMap[this.turnedX][this.turnedY] &&
            (i !== this.turnedX || j !== this.turnedY)
          ) {
            let tmp = i * 6 + j;
            this.score += 10;
            this.$set(this.flag, tmp, false);
            this.$set(this.flag, this.turnedX * 6 + this.turnedY, false);
          } else {
            this.$set(this.status[i], j, false);
            this.$set(this.status, i, this.status[i]); //翻牌
            this.$set(this.status[this.turnedX], this.turnedY, false);
            this.$set(this.status, this.turnedX, this.status[this.turnedX]); //翻牌
          }
          this.turnedY = -1;
          this.turnedX = -1;
        }
      }, 200);
    },
    resetBox() {
      console.log("buttonclicked");
      this.initFlag();
      this.initCardKind();
      this.initStatus();
      this.initImg();
      this.hasTurned= 0;
      this.turnedX= -1;
      this.turnedY= -1;
      this.score= 0;
    },
  },
  watch: {
    flag() {
      for(let i=0;i<36;i++) {
        if(!this.flag[i]) {
          this.$refs.list[i].style.opacity = 0;
        }else {
          this.$refs.list[i].style.opacity = 1;
        }
      }
    }
  }
};
</script>
<style scoped>
.container {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgb(96, 120, 187);
}
.box {
  position: relative;
  top: 3rem;
  left: 50%;
  margin-left: -4.65rem;
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 9.3rem;
  height: 9.3rem;
  display: flex;
  flex-direction: column;
  border: solid 0.1rem rgb(184, 174, 47);
  background-color: rgb(184, 174, 47);
}
.hang {
  display: flex;
}
.block {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  border: solid 0.01rem rgba(0, 0, 0, 0.5);
  background-color: rgb(199, 241, 83);
}
.blockcover {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: solid 0.1rem white;
}
.cover {
  background-color: rgb(63, 91, 214);
}

.score {
  position: relative;
  top: 5rem;
}
button {
  position: relative;
  top: 6rem;
  width: 8rem;
  height: 2rem;
  font-size: 1rem;
  border-radius: 2rem;
  border: solid 0.06rem #666;
  color: rgb(238, 236, 102);
  background-color: rgb(44, 82, 126);
}
</style>